<template>
  <div>
    <div class="list" list>
      <ul v-if="liveList.length" class="live">
        <li v-for="(item, index) in liveList" :key="index">
          <div class="photo">
            <a href="javascript: void(0)" @click="linkToDashboard(item.userId)"><img :src="item.avatar" class="photo-img"></a>
            <img src="../../assets/res/img/icon_appr.png" class="appr">
          </div>
          <div class="info">
            <div class="info-h">
              <a href="javascript: void(0)" @click="linkToDashboard(item.userId)" class="name ftz16">{{item.roomName}}</a>
              <span class="line"></span>
              <a href="javascript: void(0)" class="live-title">{{item.topicName}}</a>
            </div>
            <div class="lab">
              <span v-for="(value, key) in item.list" :key="key">{{value}}</span>
            </div>
            <div class="time">{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</div>
            <a href="javascript: void(0)" class="live-txt"> {{item.describer}}</a>
          </div>
          <div class="live-btn fr">
            <button @click="cancelSubscription(item)" class="take" take>{{item.subscribeStatus === 0?'取消订阅':'订阅'}}</button>
            <button  @click="$router.push(`/liveRoom?roomId=${item.roomId}`)" class="entry">点击进入</button>
          </div>
        </li>
      </ul>
      <button v-if="total > liveList.length" class="load-more ftz16" @click="loadMore">
        <template v-if="loading">
          <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
          <span>正在加载，请稍候......</span>
        </template>
        <span v-else>点击加载更多...</span>
      </button>
      <button class="load-more ftz16" v-if="total===liveList.length">数据已经全部加载</button>
    </div>
  </div>
</template>
<script>
// import $ from 'jquery'
import { mapState } from 'vuex'
import SideBar1 from '@/components/side-bar1'
import * as api from '@/service/api'
export default {
  components: {
    SideBar1
  },
  data () {
    return {
      liveList: [],
      total: null,
      searchData: {
        pageSize: 10,
        pageNum: 1
      },
      loading: false
    }
  },
  created () {
    this.getCicleLive()
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      userInfo: state => state.me.sysUser || {}
    }),
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  methods: {
    async getCicleLive () {
      this.loading = true
      let res = await api.getCicleLive({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.liveList = res.data.list
      } else {
        this.liveList = this.liveList.concat(res.data.list)
      }
      this.total = res.data.total
      this.loading = false
    },
    cancelSubscription (item) {
      let that = this
      let title = item.subscribeStatus === 0 ? '取消订阅' : '订阅'
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认' + title + '吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.updateLiveSubscription(item)
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    async updateLiveSubscription (item) {
      await api.updateLiveSubscription({
        subscribeStatus: item.subscribeStatus === 0 ? 1 : 0,
        roomId: item.roomId
      })
      this.getCicleLive()
    },
    linkToDashboard (itemId) {
      if (this.userId === itemId) {
        if (this.userInfo.authType === '0') {
          this.$router.push('/dashboardUser/live')
        } else {
          this.$router.push('/dashboardAuth')
        }
      } else {
        this.$router.push('/dashboard/live/' + itemId)
      }
    },
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      this.getCicleLive()
    }
  }
}
</script>
<style lang="scss">
</style>
